<template>
	<div class="pattr-box">
		<el-row>
			<el-col :span="4" style="text-align: right;">属性类型：</el-col>
			<el-col :span="20">
				<el-select v-model="productAddData.productAttributeCategoryId" @change="handleAttrChange">
					<el-option
						v-for="ptl in productTypeList"
						:key="ptl.id"
						:label="ptl.name"
						:value="ptl.id"
					>
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品规格：</el-col>
			<el-col :span="20" style="background-color: #F8F9FC;border-radius: 5px;padding:10px;min-height:40px;">
				<template v-for="(item,index) in attrListOptions">
					<span :key="index">{{item.name}}</span>
					<el-checkbox-group v-model="attrList[index]" :key="index">
						<template v-for="(item2,index2) in item.inputList.split(',')">
							<el-checkbox :label="item2" :key="index2"></el-checkbox>
						</template>
					</el-checkbox-group>
				</template>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品参数：</el-col>
			<el-col :span="20" style="background-color: #F8F9FC;border-radius: 5px;padding:10px;min-height: 40px;" >
				<template v-for="(item,index) in guigeList">
					<span style="margin-left:30px" :key="index">{{item.name}}</span><el-input :key="index"  style="width:60%;margin-left:50px;" type="text" size="small" class="iptext" v-model="guigeValueList"/>
				</template>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品相册：</el-col>
			<el-col :span="20">
				<el-upload
				  action="https://jsonplaceholder.typicode.com/posts/"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove">
				  <i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">规格参数：</el-col>
			<el-col :span="20">
				<el-tabs v-model="activeName" type="card">
				    <el-tab-pane label="电脑端详情" name="abc">
						<quill-editor v-model="content"
						                ref="myQuillEditor"
						                :options="editorOption"
						               >
						  </quill-editor>
					</el-tab-pane>
				    <el-tab-pane label="移动端详情" name="second">yyy配置管理</el-tab-pane>
				  </el-tabs>
			</el-col>
		</el-row>
		<el-button type="success" @click="next">下一步，填写商品关联</el-button>
	</div>
</template>

<script>
	import Vuex from 'vuex'
	let mapState = Vuex.mapState;
	import {getProTypeByQuery,getAttrListByAttrId,getGuigeListByAttrId	} from '@/api/protype.js'
	import { addQuillTitle } from '@/util/quill-title.js'
	
	export default{
		data(){
			return{
				productTypeList:[],
				dialogImageUrl: '',
				dialogVisible: false,
				content: '<div>example content</div>',
				editorOption: { /* quill options */height:800 },
				activeName:'abc',
				attrList:[["红色"],["38"],["秋季"],[],[]],
				attrListOptions:[],
				guigeList:[],
				guigeValueList:''
			}
		},
		mounted() {
			getProTypeByQuery({pageNum:1,pageSize:100})
			.then(resp=>{
				this.productTypeList = resp.data.data.list;
			})
			addQuillTitle();
		},
		methods:{
			//获取两属性列表
			next(){
				//还要将步骤条推一步
				this.$store.commit('activeProductAddStep',3);
				//下一个div
				this.$router.push("/product/product/add/asso")
			},
			//图片上传相关的方法
			 handleRemove(file, fileList) {
				console.log(file, fileList);
			  },
			  handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			  },
			  //当选择了属性类型事，要获取改类型对应的属性列表，进行展示
			  handleAttrChange(){
				  //发送请求，获取数据，渲染列表
				  getAttrListByAttrId(this.productAddData.productAttributeCategoryId)
				  .then(resp=>{
					  this.attrListOptions=resp.data.data.list;
				  })
				  //发送请求，获取规格列表，渲染数据
				  getGuigeListByAttrId(this.productAddData.productAttributeCategoryId)
				  .then(resp=>{
					  this.guigeList = resp.data.data.list;
				  })
			  }
			
		},
		computed:{
			...mapState(["activeProductAddStep","productAddData"]),
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.pattr-box{
		margin-top:50px;
		.el_input {
			height:32px;
			.el_input__inner{
				height:32px !important;
			}
		}
		.el-row{
			margin:20px;
			line-height: 32px;
		}
	}
	
</style>
